import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function Echar_zhu({ XData, YData }) {
    // 使用 useRef 创建一个引用，指向图表的 DOM 元素
    const chartRef = useRef(null);

    useEffect(() => {
        // 初始化 ECharts 实例
        const myChart = echarts.init(chartRef.current);

        // 设置图表的配置项
        const option = {
            xAxis: {
                type: 'category', // 类目轴
                data: XData // X 轴数据
            },
            yAxis: {
                type: 'value' // 数值轴
            },
            series: [
                {
                    data: YData, // Y 轴数据
                    type: 'bar' // 柱状图
                }
            ]
        };

        // 将配置项应用到图表
        myChart.setOption(option);

        // 在组件卸载时销毁图表实例
        return () => {
            myChart.dispose();
        };
    }, []);


    return (
        <div
            ref={chartRef}
            style={{ width: '100%', minHeight: '6rem',backgroundColor: '#fff' }}></div>
    );
}

export default Echar_zhu;
